<template>
	<div>
		<cl-crud @load="onLoad">
			<template #table-column-goodInfo="{scope}">
				<good-info :item="scope.row"></good-info>
			</template>
			<template #table-column-couponInfo="{scope}">
				<coupon-info :item="scope.row"></coupon-info>
			</template>

			<template #table-column-platform="{scope}">
				{{ scope.row.source | dict_platform }}
			</template>

			<template #table-column-ysqLevel="{scope}">
				{{ scope.row.level }}
			</template>
		</cl-crud>
	</div>
</template>

<script>
export default {
	name: 'open_crud',
	data() {
		return {
			crud: null,
		};
	},

	methods: {
		onLoad({ ctx, app }) {
			this.crud = app;

			ctx.service(this.$service.interactiveSoft.giftClassify)
				.set('dict', {
					label: {
						delete: '删除'
					}
				})
				.set('table', {
					columns: [
						{
							label: '金币数',
							prop: 'goldAmount',
							align: 'center'
						},
						{
							label: '排序',
							prop: 'level',
							align: 'center'
						}
					],

					op: {
						layout: ['edit', 'delete']
					}
				})
				.set('upsert', {
					props: {
						labelWidth: '70px',
						width: '400px',
						center: true,
						'custom-class': 'custom-class-dialog-mini'
					},
					items: [
						{
							prop: 'goldAmount',
							label: '金币数',
							span: 16,
							component: {
								name: 'el-input',
								props: {
									disabled: false
								}
							}
						},
						{
							prop: 'level',
							label: '排序',
							value: 100,
							span: 13,
							component: {
								name: 'el-input'
							}
						}
					]
				})
				.set('layout', [
					['refresh-btn', 'add-btn', 'query', 'flex1'],
					['data-table']
				])
				.on('open', (isEdit, data) => {
					isEdit ? this.crud.setData('upsert.items[prop:floorId].component.props.disabled', true) : this.crud.setData('upsert.items[prop:floorId].component.props.disabled', false);					
				})
				.done();

			app.refresh({
				prop: 'level',
				order: 'asc'
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.setsort {
	color: $color-link;
	cursor: pointer;
	margin: 5px 5px 5px 15px;
	:hover {
		opacity: 0.8;
	}
}
.nav {
	font-size: $font12;
	.nav-li {
		margin-left: 10px;
	}
}
.el-select {
	width: 100px;
}
</style>
